<template>
    <el-container style="height: 100%;">
        <el-row class="enatr">
            <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
                <el-button type="primary" size="medium" @click="addEntyAttr" style="width: 130px;position: absolute;right: 90px;">新增实体属性</el-button>
                <el-button type="primary" size="medium" @click="editOut" style="width: 80px;position: absolute;right: 0;">关闭</el-button>
            </el-row>
            <el-form>
                <el-table
                        :data="entyAttrData"
                        size="mini"
                        @current-change="userChge"
                        height="350"
                        max-height="400"
                        :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                        highlight-current-row
                        border
                        style="font-size: 16px;"
                >
                    <el-table-column prop="attrName" label="属性名称" min-width="90"></el-table-column>
                    <!--                <el-table-column prop="" label="属性单位" min-width="100"></el-table-column>-->
                    <el-table-column prop="oldVal" label="旧属性值" min-width="90"></el-table-column>
                    <el-table-column prop="val" label="新属性值" min-width="90">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.val" placeholder="属性值"></el-input>
                            </el-form-item>
                        </template>
                        <el-input v-model="attrVal" placeholder="请输入属性名称"></el-input>
                    </el-table-column>
                    <el-table-column prop="chgTime" label="变动时间" min-width="90"></el-table-column>
                    <el-table-column width="150" fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="changeAttr( scope.row )"
                                       icon="el-icon-edit">变更属性值
                            </el-button>
                            <el-button type="danger" size="mini" @click="deleteEntyAttr( scope.row )"
                                       icon="el-icon-delete">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <el-row v-show="enatrShow" style="padding-top: 10px">
                <el-card class="box-card">
                    <div class="text item">
                        <addEntyAttr @editState="editState" :enty="enty"></addEntyAttr>
                    </div>
                </el-card>
            </el-row>
<!--            <el-row type="flex" justify="center" class="pagination">-->
<!--                <el-pagination-->
<!--                        @size-change="userSize"-->
<!--                        @current-change="pgChge"-->
<!--                        :current-page="entyAttrPage.currentPage"-->
<!--                        :page-sizes="[10, 20, 30]"-->
<!--                        :page-size="entyAttrPage.pageSize"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="entyAttrPage.totalElements"-->
<!--                ></el-pagination>-->
<!--            </el-row>-->
            <transition name="el-fade-in">
                <floatingBox v-show="editBoxShow">
                    <addEntyAttr v-if="addShow" slot="edit" @editState="editState"></addEntyAttr>
                </floatingBox>
            </transition>
        </el-row>
    </el-container>
</template>

<script>
    import floatingBox from "../../public/floatingBox.vue";
    import addEntyAttr from "./addEntyAttr.vue";
    import {replaceSpacesObj} from "../../../utils/webUtils";

    export default {
        name: "enty",
        components: {floatingBox, addEntyAttr},
        props: {
            enty: {
                type: Object
            }
        },
        data() {
            return {
                attrValShow:false,
                attrVal:'',
                enatrShow:false,
                editBoxShow: false,
                addShow: false,
                editShow: false,
                userSchOn: '',
                entyEdit: false,
                uuid: '',
                entyAttrData: [],
                entyAttrPage: {
                    pageSize: 10,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {
                        srhData: ''
                    }
                }
            };
        },
        watch: {
            enty(val) {
                this.editEntyData = val;
            }
        },
        mounted() {
            this.queryEntyAttr();
        },
        methods: {
            changeAttr(value){
                this.axios.request({
                    method: "put",
                    url: "./smt/kdi/enatr/" + value.uuid +'/val',
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    data: replaceSpacesObj(value)
                }).then(() => {
                    this.queryEntyAttr();
                }).catch(error => {
                    console.log(error);
                    this.info = "修改失败";
                    this.infoShow = true;
                });

            },
            addEntyAttr() {
                this.enatrShow = true;
            },
            editState(msg) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.entyEdit = msg;
                this.enatrShow = msg;
                this.queryEntyAttr();
            },
            editEntyAttr(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.entyEdit = true;
            },
            deleteEntyAttr(val) {
                this.$confirm('确认删除 ' + val.name + " ?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.request({
                        method: "delete",
                        url: "./smt/kdi/enatr/" + val.uuid,
                        data: {}
                    }).then(() => {
                        this.$message({
                            message: "删除成功!",
                            type: 'success'
                        });
                        this.queryEntyAttr();
                    }).catch(error => {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editOut() {
                this.$emit("editState", false);
            },
            userChge(val) {
                if (this.entyEdit) {
                    this.uuid = val.uuid;
                }
            },
            //获取所有数据
            queryEntyAttr() {
                this.axios.request({
                    method: "get",
                    url: "./smt/kdi/enatr/search/findByEnty",
                    params: {entyUuid:  this.enty.uuid}
                }).then(response => {
                    this.entyAttrData = response.data.content;
                }).catch(error => {
                    console.log(error);
                });
            },
            //列表分页
            userSize: function (pageSize) {
                this.entyAttrPage.pageSize = pageSize;
                if (this.entyAttrPage.currentPage === 1) {
                    if (this.userSchOn !== "") {
                        // this.userSearch();
                    } else {
                        this.queryEntyAttr();
                    }
                }
                this.entyAttrPage.currentPage = 1;
            },
            pgChge(currentPage) {
                this.entyAttrPage.currentPage = currentPage;
                this.queryEntyAttr();
            }
        }
    };
</script>

<style scoped>
    .enatr {
        width: 600px;
        height: 500px;
        z-index: 100;
    }


</style>